<template>
     <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="场所">
            <el-select v-model="formData.venueIds" multiple placeholder="请选择场所" style="width: 240px">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-date-picker style="width:210px" v-model="formData.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />

        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <div id="myChart" :style="{ height: '300px' }"></div>
</template>


<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { trackApi, venueApi } from '@/api/index'
import * as echarts from 'echarts'
import  dayjs from 'dayjs'

const formData = reactive({
    venueIds: [],
    dateRange: [dayjs().add(-7, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
})
const options = ref([])
onMounted(() => {
    callVenueApi()
    callTrackApi()
})
const callVenueApi = () => {
    venueApi.select.call().then((res: any) => {
        options.value = res.list
    })
}
const onSubmit = () => {

    callTrackApi()
}
const callTrackApi = () => {

    let params = {}

    if (formData.venueIds.length != 0) {
        params.venueIds = formData.venueIds
    }

    params.startDate = formData.dateRange[0]
    params.endDate = formData.dateRange[1] + " 23:59:59"

    trackApi.select.call(params).then((data: any) => {

        initChart(data)


    })
}
const initChart = (data: any) => {

    let days = new Set(data.map((item: any) => item.day))

    let names = new Set(data.map((item: any) => item.name))


    let myChart = echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.clear()
    //你变的只是这里
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '人流数据分析'
        },
        tooltip: {},
        legend: {
            data: [...names]
        },
        xAxis: {
            data: [...days]
        },
        yAxis: {},
        series: []
    };


    for (let name of names) {

        option.series.push({
            name: name,
            type: 'line',//line
            data: data.filter(p => p.name == name).map(item => item.count)
        })

    }
     console.log(option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = function () {//自适应大小
        myChart.resize();
    };

}


</script>